<template>
    <div class="course">
        <!--  课程列表 -->
        <div class="course-box">
            <div class="course-box-one">
                <div class="course-box-one-left"><span></span> &nbsp&nbsp课程列表</div>
                <div class="course-box-one-right">
                    <el-button class="edit_btn" @click="shua"><i class="el-icon-refresh">&nbsp&nbsp刷新</i></el-button>
                </div>
            </div>
            <!-- 课程的高级检索 -->
            <div class="course-box-two">
                <div class="course-box-two-left"><i class="el-icon-search"></i>&nbsp&nbsp筛选查询</div>
                <div class="course-box-two-right">
                    <template>
                        <div>
                            <el-button class="edit_btn" @click="dialogSelectQuery">高级检索</el-button>
                            <el-dialog
                                    width="50%"
                                    title="高级检索"
                                    :visible.sync="dialogFormVisible"
                                    append-to-body
                                    class="upload-dialog">
                                <el-row>
                                    <el-form :label-position="labelPosition" label-width="80px" :model="advancedQuery">
                                        <el-col :span="10">
                                            <el-form-item label="课程分类：" :label-width="formLabelWidth">
                                                <el-select @keyup.enter.native="queryData" v-model="advancedQuery.classId" placeholder="请选择课程分类">
                                                    <el-option label="后端" :value="1"></el-option>
                                                    <el-option label="前端" :value="2"></el-option>
                                                    <el-option label="运营" :value="3"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="10" :offset="3">
                                            <el-form-item label="课程名称：" :label-width="formLabelWidth">
                                                <el-input @keyup.enter.native="queryData" v-model="advancedQuery.courseName" placeholder="请选择课程名称"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="10">
                                            <el-form-item label="上传人员：":label-width="formLabelWidth">
                                                <el-select @keyup.enter.native="queryData" v-model="advancedQuery.createId" placeholder="请选择上传人员">
                                                    <el-option label="张三" :value="1"></el-option>
                                                    <el-option label="李四" :value="2"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="10" :offset="3">
                                            <el-form-item label="课程售价：" :label-width="formLabelWidth">
                                                <el-input @keyup.enter.native="queryData" v-model="advancedQuery.coursePrice" placeholder="请选择课程售价"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="10">
                                            <el-form-item label="审核状态：" :label-width="formLabelWidth">
                                                <el-select @keyup.enter.native="queryData" v-model="advancedQuery.courseCstatus" placeholder="请选择审核状态">
                                                    <el-option label="未审核" :value="3"></el-option>
                                                    <el-option label="审核中" :value="4"></el-option>
                                                    <el-option label="审核失败" :value="5"></el-option>
                                                    <el-option label="其他" :value="6"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="10" :offset="3">
                                            <el-form-item label="课程标签：" :label-width="formLabelWidth">
                                                <el-input @keyup.enter.native="queryData" v-model="advancedQuery.courseIntro" placeholder="请选择课程标签"></el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-form>
                                </el-row>
                                <div slot="footer" class="dialog-footer">
                                    <el-button type="success" @click="dialogFormVisible = false" class="footer_qx">取消</el-button>
                                    <el-button type="success" v-show="btn_show" @click="handleQuery" class="footer_qd">开始检索</el-button>
                                </div>
                            </el-dialog>
                        </div>
                    </template>
                </div>
            </div>
        </div>
        <!-- 课程的模糊查询 -->
        <div class="course-mohu">
            <el-form :inline="true" :model="advancedQuery">
                <el-form-item label="课程名称：">
                    <el-input @keyup.enter.native="likeData" type="text" v-model="advancedQuery.courseName" placeholder="请选择课程名称"></el-input>
                </el-form-item>
                <el-form-item label="课程分类：">
                    <el-select @keyup.enter.native="likeData" v-model="advancedQuery.classId" placeholder="请选择课程分类">
                        <el-option label="后端" :value="1"></el-option>
                        <el-option label="前端" :value="2"></el-option>
                        <el-option label="运营" :value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上传人员：">
                    <el-select @keyup.enter.native="likeData" v-model="advancedQuery.createId" placeholder="请选择上传人员">
                        <el-option label="张三" :value="1"></el-option>
                        <el-option label="李四" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="课程标签：">
                    <el-input @keyup.enter.native="likeData" type="text" v-model="advancedQuery.courseIntro" placeholder="请选择课程标签"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="dimSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 树形组件的头工具栏 -->
        <div class="course-tree">
            <div>商品分类
                <!--树形组件-->
                <el-tree
                        :data="treeData"
                        :props="defaultProps"
                        default-expand-all
                        style="background: #F2F2F2;margin-top: 2px;height: 490px;"
                        @node-click="handleNodeClick"></el-tree>
            </div>
        </div>
        <!--表格头部工具栏-->
        <div class="">
            <div class="course-table-one">
                <span><i class="el-icon-s-unfold"></i>数据列表</span>
                <div><el-button class="edit_btn" @click="$router.push('/CourseAddInsert')">添加课程</el-button></div>
            </div>
            <!--  实现表格 -->
            <div class="course-table-two">
                <el-table
                        :data="tableData.slice((currentPage - 1) * pagesize,currentPage * pagesize)"
                        border
                        type="selection"
                        :header-cell-style="{background:'#F9FAFC'}"
                        style="width: 1200px"
                        @selection-change="handleSelectionChange">
                    <!-- 复选框 -->
                    <el-table-column
                            type="selection"
                            align="center">
                    </el-table-column>
                    <!-- 课程编号 -->
                    <el-table-column
                            fixed
                            prop="userId"
                            align="center"
                            label="课程编号"
                            width="110">
                    </el-table-column>
                    <!-- 课程图片 -->
                    <el-table-column
                            align="center"
                            label="课程图片"
                            width="110">
                        <template slot-scope="scope" >
                            <el-image :src="scope.row.courseUrl" style="width: 70px;height: 40px;"/>
                        </template>
                    </el-table-column>
                    <!-- 课程名称 -->
                    <el-table-column
                            prop="courseName"
                            align="center"
                            label="课程名称"
                            width="130">
                    </el-table-column>
                    <!-- 课程价格 -->
                    <el-table-column
                            prop="coursePrice"
                            align="center"
                            label="课程价格"
                            width="110">
                    </el-table-column>
                    <!-- 上传人员 -->
                    <el-table-column
                            prop="createId"
                            align="center"
                            label="上传人员"
                            :formatter="shangchuang"
                            width="120">
                    </el-table-column>
                    <!-- 课程分类 -->
                    <el-table-column
                            prop="classId"
                            align="center"
                            label="课程分类"
                            :formatter="fenlei"
                            width="110">
                    </el-table-column>
                    <!-- 课程标签 -->
                    <el-table-column
                            prop="courseIntro"
                            align="center"
                            label="课程标签"
                            width="120">
                    </el-table-column>
                    <!-- 课程销量 -->
                    <el-table-column
                            prop="saleNum"
                            align="center"
                            label="课程销量"
                            width="110">
                    </el-table-column>
                    <!-- 审核状态 -->
                    <el-table-column
                            prop="courseCstatus"
                            align="center"
                            label="审核状态"
                            :formatter="shenhe"
                            width="120">
                        <template slot-scope="scope">
                            <!-- 使用管道符使他在一个框里 -->
                            {{scope.row.courseCstatus | shenhe}}
                            <el-button type="text" class="btn" @click="audit(scope.row)">审核详情</el-button>
                            <!-- 审核详情------- 表格 -->
                            <el-dialog
                                    width="50%"
                                    top="30vh"
                                    title="课程审核详情"
                                    class="upload-dialog"
                                    append-to-body
                                    :modal-append-to-body="false"
                                    :visible.sync="dialogTableVisible">
                                <el-table :data="gridData" border :header-cell-style="{background:'#F9FAFC'}">
                                    <el-table-column property="id" label="审核ID" width="140" align="center"></el-table-column>
                                    <el-table-column property="applyDate" label="审核时间" width="192" align="center"></el-table-column>
                                    <el-table-column property="launchId" label="审核人员" align="center" width="160"></el-table-column>
                                    <el-table-column property="result" label="审核结果" :formatter="shen" align="center" width="160"></el-table-column>
                                    <el-table-column property="remarks" label="反馈详情" align="center" width="160"></el-table-column>
                                </el-table>
                            </el-dialog>
                        </template>
                    </el-table-column>
                    <!-- 操作 -->
                    <el-table-column
                            align="center"
                            label="操作"
                            width="110">
                        <template slot-scope="scope">
                            <el-button type="text" @click="dialogSelect(scope.row)" class="btn">查看</el-button>
                            <el-button type="text" @click="handleAmend(scope.$index, scope.row)" class="btn">编辑</el-button>
                            <el-button type="text" @click="handleDelete(scope.$index,scope.row)" class="btn">删除</el-button>
                            <!-- 日 志 的 跳 转 -->
                            <el-button type="text" class="btn" @click="$router.push('/CourseLog')">日志</el-button>
                            <!-- 表格弹窗------ 查看 -->
                            <el-dialog
                                    width="50%"
                                    title="课程详情"
                                    :visible.sync="dialogFormVisible01"
                                    class="upload-dialog"
                                    append-to-body
                                    :modal-append-to-body="false">
                                <el-row>
                                    <el-form :label-position="labelPosition01" label-width="80px" :model="advancedQuery">
                                        <el-col :span="9">
                                            <el-form-item label="课程编号：" :label-width="formLabelWidth">
                                                <el-input v-model="advancedQuery.userId" readonly/>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="9" :offset="5">
                                            <el-form-item label="课程名称：":label-width="formLabelWidth">
                                                <el-input v-model="advancedQuery.courseName" readonly/>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="9">
                                            <el-form-item label="课程价格：" :label-width="formLabelWidth">
                                                <el-input v-model="advancedQuery.coursePrice" readonly/>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="9" :offset="5">
                                            <el-form-item label="上传人员：" :label-width="formLabelWidth">
                                                <el-select v-model="advancedQuery.createId" placeholder="请选择课程分类">
                                                    <el-option label="张三" :value="1"></el-option>
                                                    <el-option label="李四" :value="2"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="9">
                                            <el-form-item label="课程分类：" :label-width="formLabelWidth">
                                                <el-select v-model="advancedQuery.classId" placeholder="请选择课程分类">
                                                    <el-option label="后端" :value="1"></el-option>
                                                    <el-option label="前端" :value="2"></el-option>
                                                    <el-option label="运营" :value="3"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="9" :offset="5">
                                            <el-form-item label="课程销量：" :label-width="formLabelWidth">
                                                <el-input v-model="advancedQuery.saleNum" readonly/>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="23">
                                            <el-form-item label="课程标签：":label-width="formLabelWidth">
                                                <el-input
                                                        type="textarea"
                                                        :autosize="{ minRows: 2, maxRows: 4}"
                                                        readonly
                                                        v-model="advancedQuery.courseIntro">
                                                </el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="23">
                                            <el-form-item label="课程介绍：":label-width="formLabelWidth">
                                                <el-input
                                                        type="textarea"
                                                        :autosize="{ minRows: 4, maxRows: 4}"
                                                        readonly
                                                        v-model="advancedQuery.courseInfo">
                                                </el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-form>
                                </el-row>
                            </el-dialog>

                            <!-- 表格弹窗------ 编辑 -->
                            <el-dialog
                                    width="50%"
                                    title="修改课程信息"
                                    :visible.sync="dialogFormVisible02"
                                    class="upload-dialog"
                                    append-to-body
                                    :modal-append-to-body="false">
                                <el-row>
                                    <el-form :label-position="labelPosition01" label-width="80px" :model="advancedQuery">
                                        <el-col :span="9">
                                            <el-form-item label="课程编号：" :label-width="formLabelWidth">
                                                <el-input v-model="advancedQuery.userId" placeholder="请选择课程编号"/>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="9" :offset="5">
                                            <el-form-item label="课程名称：":label-width="formLabelWidth">
                                                <el-input v-model="advancedQuery.courseName" placeholder="请选择课程名称"/>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="9">
                                            <el-form-item label="课程价格：" :label-width="formLabelWidth">
                                                <el-input v-model="advancedQuery.coursePrice" placeholder="请选择课程价格"/>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="9" :offset="5">
                                            <el-form-item label="上传人员：" :label-width="formLabelWidth">
                                                <el-select v-model="advancedQuery.createId" placeholder="请选择课程分类">
                                                    <el-option label="张三" :value="1"></el-option>
                                                    <el-option label="李四" :value="2"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="9">
                                            <el-form-item label="课程分类：" :label-width="formLabelWidth">
                                                <el-select v-model="advancedQuery.classId" placeholder="请选择课程分类">
                                                    <el-option label="后端" :value="1"></el-option>
                                                    <el-option label="前端" :value="2"></el-option>
                                                    <el-option label="运营" :value="3"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="9" :offset="5">
                                            <el-form-item label="课程销量：" :label-width="formLabelWidth">
                                                <el-input v-model="advancedQuery.saleNum" placeholder="请选择课程销量"/>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="23">
                                            <el-form-item label="课程标签：":label-width="formLabelWidth">
                                                <el-input
                                                        type="textarea"
                                                        :autosize="{ minRows: 2, maxRows: 4}"
                                                        placeholder="请选择课程标签"
                                                        v-model="advancedQuery.courseIntro">
                                                </el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="23">
                                            <el-form-item label="课程介绍：":label-width="formLabelWidth">
                                                <el-input
                                                        type="textarea"
                                                        :autosize="{ minRows: 4, maxRows: 4}"
                                                        placeholder="请选择课程介绍"
                                                        v-model="advancedQuery.courseInfo">
                                                </el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-form>
                                </el-row>
                                <div slot="footer" class="dialog-footer">
                                    <el-button  @click="dialogFormVisible02 = false" class="footer_qx">取 消</el-button>
                                    <el-button type="primary" v-show="btn_show01" @click="handleUpdate" class="footer_qd">确 定</el-button>
                                </div>
                            </el-dialog>

                            <!-- 表格弹窗------ 删除 -->
                            <el-dialog
                                    append-to-body
                                    :modal-append-to-body="false"
                                    class="upload-dialog"
                                    title="提示"
                                    :visible.sync="dialogFormVisible03">
                                <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
                                <span slot="footer">
                                    <el-button  @click="dialogFormVisible03 = false" class="footer_qx">取 消</el-button>
                                    <el-button type="primary" @click="deleteRow" class="footer_qd">确 定</el-button>
                                </span>
                            </el-dialog>

                        </template>
                    </el-table-column>
                </el-table>
                <!--分页-->
                <div>
                    <el-pagination
                            class="pagination"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[1,2,3,4,5,6,7,8]"
                            :page-size="pagesize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="tableData.length">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Course",
        inject: ['reload'], //注入
        //生命周期获取树形结构的全查及表格的全查
        created() {
            //调用树形的方法
            this.handleNodeClick();
            //调用数据表格的方法
            this.getAll();
            //调用商品审核的详情的方法
            this.getShenHe();
        },
        data(){
            return{
                //课程审核
                gridData: [],
                //审核详情是否一打开页面弹窗
                dialogTableVisible:false,
                //弹窗的宽度
                formLabelWidth:"100px",
                //高级检索中的label的样式
                labelPosition:"top",
                //高级检索是否一打开页面弹窗
                dialogFormVisible:false,
                //点击高级检索进去之后在点击开始检索的时候退出来
                btn_show:false,
                //高级检索中的数据（注意数据不要加空格，如果加了空格之后placeholder属性会显示不出来）
                advancedQuery:{
                    classId:"",//课程分类
                    courseName:"",//课程名称
                    coursePrice:"",//课程售价
                    createId:"",//上传人员
                    courseCstatus:"",//审核状态
                    courseIntro:"",//课程标签
                    couseId:"",//课程的自增ID
                    userId:"",//课程编号（用户ID）
                    saleNum:"",//课程销量
                    courseInfo:"",//课程介绍（课程详情）
                },
                //查看按钮是否一打开页面弹窗
                dialogFormVisible01:false,
                //查看、编辑按钮中的label样式
                labelPosition01:"left",
                //编辑按钮是否一打开页面弹窗
                dialogFormVisible02:false,
                //点击编辑进去之后在点击确定的时候退出来
                btn_show01:false,
                //删除按钮是否一打开页面弹窗
                dialogFormVisible03:false,
                //树形组件的数组(课程)
                treeData: [],
                //获取树形结构的子节点
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                //表格中的数组(课程)
                tableData:[],
                //复选框(课程)
                multipleSelection: [],
                //分页
                currentPage: 1,//默认的页数
                currentIndex: ' ',
                pagesize: 5,//总条数
            }
        },
        methods:{
            //审核详情按钮 ---- 弹窗
            audit(){
                this.dialogTableVisible = true;
            },
            //商品审核的表
            getShenHe(){
                this.$http.get("/JsCourseRecord/getAll").then(res =>{
                    console.log(res)
                    this.gridData = res.data.data;
                },err =>{
                    alert("商品审核数据请求失败！！！");
                })
            },
            //当点击高级检索的时候弹窗,开始检索的时候出来数据退出来
            dialogSelectQuery(){
                this.dialogFormVisible = true;
                this.btn_show = true;
            },
            //调用高级检索数据的方法
            handleQuery(){
                this.dialogFormVisible = false;
                this.queryData();
            },
            //高级检索数据的方法
            queryData(){
                this.$http.get("/JsCourse/advancedSelect",{
                    params:{
                        "classId":this.advancedQuery.classId,
                        "courseName":this.advancedQuery.courseName,
                        "coursePrice":this.advancedQuery.coursePrice,
                        "createId":this.advancedQuery.createId,
                        "courseCstatus":this.advancedQuery.courseCstatus,
                        "courseIntro":this.advancedQuery.courseIntro,
                    }
                }).then(res =>{
                    this.tableData = res.data;
                }).catch(err =>{
                    console.log("高级检索请求数据失败！！！");
                })
            },
            //模糊查询（调用模糊查询数据的方法）
            dimSubmit(){
                this.likeData();
            },
            //模糊查询数据的方法(连接后端)
            likeData(){
                this.$http.get("/JsCourse/dimSubmit",{
                    params:{
                        "courseName":this.advancedQuery.courseName,
                        "classId":this.advancedQuery.classId,
                        "createId":this.advancedQuery.createId,
                        "courseIntro":this.advancedQuery.courseIntro,
                    }
                }).then(res =>{
                    this.tableData = res.data
                }).catch(err =>{
                    console.log("模糊查询请求数据失败！！！")
                })
            },
            //查看按钮数据方法 --- 弹窗
            dialogSelect(item){
                this.dialogFormVisible01 = true
                this.advancedQuery = {
                    userId:item.userId,
                    courseName:item.courseName,
                    coursePrice:item.coursePrice,
                    createId:item.createId,
                    classId:item.classId,
                    saleNum:item.saleNum,
                    courseIntro:item.courseIntro,
                    courseInfo:item.courseInfo,
                }
            },
            //编辑按钮数据的方法（获取表单的数据） --- 弹窗
            handleAmend(index,row){
                this.dialogFormVisible02 = true
                this.btn_show01 = true
                this.advancedQuery = {
                    couseId:row.couseId,
                    userId:row.userId,
                    courseName:row.courseName,
                    coursePrice:row.coursePrice,
                    createId:row.createId,
                    classId:row.classId,
                    saleNum:row.saleNum,
                    courseIntro:row.courseIntro,
                    courseInfo:row.courseInfo,
                }
            },
            //编辑按钮 ---弹窗里面的确定按钮中数据（连接后端）
            handleUpdate(){
                this.$http.post("/JsCourse/getUpdate",{
                    "couseId":this.advancedQuery.couseId,
                    "userId":this.advancedQuery.userId,
                    "courseName":this.advancedQuery.courseName,
                    "coursePrice":this.advancedQuery.coursePrice,
                    "createId":this.advancedQuery.createId,
                    "classId":this.advancedQuery.classId,
                    "saleNum":this.advancedQuery.saleNum,
                    "courseIntro":this.advancedQuery.courseIntro,
                    "courseInfo":this.advancedQuery.courseInfo
                }).then(res =>{
                    console.log(res)
                    this.tableData = res.data
                    this.dialogFormVisible02 = false
                    this.reload();//局部刷新
                }).catch(err =>{
                    console.log("编辑请求数据失败！！！")
                })
            },
            //删除按钮 --- 弹窗
            handleDelete(index,row){
                this.check.couseId = row.couseId;
                console.log(this.check.couseId);
                this.dialogFormVisible03 = true;
            },
            //删除按钮里面弹窗确定按钮
            deleteRow(){
                this.$http.post("/JsCourse/getDelete",this.check).then(res =>{
                    if (res.data.status === 200){
                        this.$message.success("删除成功");
                    }
                    this.reload();
                }).catch(err =>{
                    this.$message.error("删除失败");
                })
                this.dialogFormVisible03 = false;
            },
            //tree数据
            handleNodeClick(date){
                this.$http.get("/course/getAll").then(res =>{
                    console.log(res);
                    this.treeData = res.data;
                },err =>{
                    alert("tree数据请求失败！！！");
                })
            },
            //刷新按钮
            shua(){
                this.reload();//局部刷新
            },
            //table数据
            //表格中的全查
            getAll(){
                this.$http.get("/JsCourse/getAll").then(res =>{
                    console.log(res);
                    this.tableData = res.data.data;
                },err =>{
                    alert("table数据请求失败！！！");
                })
            },
            //分页的条数
            handleSizeChange(val){
                this.pagesize = val;
                console.log(`每页 ${val} 条`);
            },
            //分页的页数
            handleCurrentChange(val){
                this.currentPage = val
            },
            //复选框中的方法
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //上传人员(1、张三2、李四)
            shangchuang(row){
                if (row.createId == 1){
                    return "张三";
                }else if (row.createId == 2){
                    return "李四";
                }
            },
            //课程分类(1、后端2、前端3、运营)
            fenlei(row){
                if (row.classId == 1){
                    return "后端";
                }else if (row.classId == 2){
                    return "前端";
                } else if (row.classId == 3){
                    return "运营";
                }
            },
            //商品+课程表中的审核
            shen(row){
                if (row.result == 1){
                    return "审核通过";
                }else if (row.result == 2){
                    return "审核未通过";
                }
            },
            //审核状态(3、未审核4、审核中5、审核失败6、其他)
            shenhe(row){
            },
        },
        //审核状态的过滤器
        filters:{
            shenhe(row){
                if (row == 3){
                    return "未审核";
                }else if (row == 4){
                    return "审核中";
                } else if (row == 5){
                    return "审核失败";
                } else if (row == 6){
                    return "其他";
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    /*初始化样式*/
    *{
        padding: 0;
        margin: 0;
        font-size: 13px;
    }
    /*改变按钮的样式*/
    .edit_btn{
        margin-top: 8px;
        height: 35px;
        line-height: 10px;
        width: 90px;
    }
    /*最外边的盒子给它的宽度为1520px*/
    .course{
        width: 1470px;
    }
    /*我给下面几行包起来了，需要一个高度，要不然下面的模糊查询的高度，会随着它一起动*/
    .course-box{
        height: 115px;
    }
    /*课程列表需要左浮动*/
    .course-box-one-left{
        float: left;
        color: #99A4BF;
    }
    /*课程列表需要一个绿色的边框*/
    .course-box-one-left span{
        border-left: 5px solid #1ABC9C;
    }
    /*刷新等一些按钮需要右浮动*/
    .course-box-one-right{
        float: right;
        padding-right: 80px;
    }
    /*课程列表及高级筛选的样式*/
    .course-box-one,.course-box-two{
        margin-bottom: 15px;
        width: 100%;
        background: #F3F3F3;
        height: 50px;
        line-height: 50px;
        float: right;
    }
    /*筛选查询的左浮动*/
    .course-box-two-left{
        float: left;
        padding-left: 10px;
        color: #666;
    }
    /*高级检索的右浮动*/
    .course-box-two-right{
        float: right;
        padding-right: 80px;
    }
    /*模糊查询的边框*/
    .course-mohu{
        text-align: center;
        width: 1468px;
        background: #FDFDFE;
        border: 1px solid #E4E4E4;
        height: 68px;
        line-height: 35px;
        margin-bottom: 15px;
    }
    /*tree结构的样式*/
    .course-tree{
        padding-top: 1px;
        float: left;
        background-color: #F2F2F2;
        width: 240px;
        height: 50px;
        line-height: 50px;
        padding-left: 15px;
    }
    /*数据列表整体向右浮动*/
    .course-table-one{
        width: 1200px;
        float: right;
        background: #F3F3F3;
        height: 50px;
    }
    /*数据列表需要向左浮动*/
    .course-table-one span{
        float: left;
        color: #666;
        height: 50px;
        line-height: 50px;
        padding-left: 20px;
    }
    /*添加课程需要向右浮动*/
    .course-table-one div{
        float: right;
        padding-right: 15px;
    }
    /*表格整体向右浮动*/
    .course-table-two{
        float: right;
        width: 1200px;
    }
    /*分页边框的样式*/
    .pagination{
        padding-top: 10px;
        padding-right: 20px;
        text-align: right;
        background: #FDFDFE;
        width: 1173px;
        height: 40px;
        border: 1px solid #E4E4E4;
    }
    //弹窗的取消按钮样式
    .footer_qx{
        background: #fff;
        border-color: #1ABC9C;
        color: #1ABC9C;
    }
    //弹窗的确定按钮样式
    .footer_qd{
        background: #1ABC9C;
    }
    //查、改、删、日志按钮的颜色
    .btn{
        color: #1ABC9C;
    }

</style>
<style lang="less">
    /*对话框的样式*/
    .dialog-footer{
        border-top: 1px solid #E4E4E4;
        margin-top: -25px;
        padding-top: 15px;
        padding-right: 10px;
    }
    /*对话框按钮的边距*/
    .dialog-footer el-button{
        margin-left: 20px;
    }
    /*对话框标题的样式*/
    .upload-dialog .el-dialog__header{
        border-bottom: 1px solid #E4E4E4;
        background: #F2F2F2;
        font-weight: 700;
    }
    // 覆盖层元素增加可穿透点击事件
    .el-dialog__wrapper{
        pointer-events:none;
    }
    // 弹窗层元素不可穿透点击事件（不影响弹窗层元素的点击事件）
    .el-dialog{
        pointer-events:auto;
    }
</style>